<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的行程 - 爽客网</title>
<%@include file="../common/js.jsp" %>
<%@include file="../common/jspcommon.jsp" %>
<%@include file="../common/css.jsp" %>
<script type="text/javascript" src="/thirdparty/My97DatePicker/WdatePicker.js"></script>


<link href="../../css/mainpage.css" type="text/css" rel="stylesheet" />
<!--[if ie]><script src="../../js/common/iepng.js" type="text/javascript"></script><![endif]-->
<!--[if ie 6]><link href="../../css/jrIE6.css" type="text/css" rel="stylesheet"><![endif]-->
<!--[if ie]><link href="../../css/jrIE.css" type="text/css" rel="stylesheet"><![endif]-->
<script src="/js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>

</head>

<body>
	<!-- head -->
    <%@include file="../common/header.jsp" %>
    <!-- head--end -->
    
    <!-- content-->
    <div class="w100p">
        
       	<div class="w980 mg box_style1">
        	<div class="journey_box">
            	<table class="j_search" width="870">
                	<tbody>
                    	<tr>
                        	<td width="380">行程名称</td>
                            <td width="120">总天数</td>
                            <td width="220">开始日期</td>
                            <td></td>
                        </tr>
                        <tr class="row2">
                        	<td><input type="text" class="tb" id="title" value="${trip.title}"/><input type="hidden" class="tb" id="tripId" value="${trip.id}"/></td>
                            <td>
                            	<select class="day" id="daysTrip" onchange="beDaysList();">
                            		<option <c:if test="${trip.days==1}">selected="selected"</c:if>>1</option>
                                    <option <c:if test="${trip.days==2}">selected="selected"</c:if>>2</option>
                                    <option <c:if test="${trip.days==3}">selected="selected"</c:if>>3</option>
                                    <option <c:if test="${trip.days==4}">selected="selected"</c:if>>4</option>
                                    <option <c:if test="${trip.days==5}">selected="selected"</c:if>>5</option>
                                    <option <c:if test="${trip.days==6}">selected="selected"</c:if>>6</option>
                                    <option <c:if test="${trip.days==7}">selected="selected"</c:if>>7</option>
                            	</select>
                            </td>
                            <td>
                            	<input class="tb_date"  type="text" id="startTime"  readonly="readonly" name="startTime" onclick="WdatePicker({el:'startTime',dateFmt:'yyyy-MM-dd',readOnly:true,isShowClear:false});" value="${trip.startDate}"/>
                            </td>
                            <td>
                            	<div class="pr">
                            		<input type="button" class="btn" onclick="updateTrip();"/>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- content-->
        <div class="w980 mg box_style1">
        	<div class="clearfix journey">
            	<h1 class="total_title">组织您的旅游项目</h1>
            	<!-- left-->
            	<div class="t_leftbox">
                	<!-- left-part-one-->
                	<div class="gradient_sbox mb5">
                        <div class="gra_head">
                            <h1 class="clearfix pr">
                                <img src="../../images/smallpic/title_11.gif" class="fl block" /><span class="fl">我的收藏</span>
                            </h1>
                        </div>
                        <div class="gra_body">
                        	<div class="mg_line mg_style1">
                        	 <div id="dom0">
	                                <ul class="pt_box">
	                               
	                                	<c:forEach items="${keepModel.list}" var="keep" >
		                                    <li class="my_store" id="my_keep_${keep.id}" name="${keep.ownerName}" image="${keep.image}" owner="${keep.receiveOwner}" type="${keep.receiveOwnerType}" >
		                                    	<div>
			                                        <a href="#" class="fl"><img src="${keep.image}" class="block" style="width: 80px;"height="56px;"/></a>
			                                        <div class="r_box">
			                                            <a href="#" class="name">${keep.ownerName}</a>
			                                        </div>
		                                        </div>
		                                    </li>
	                                    </c:forEach>
	                            
	                                </ul>
	                                <div class="fy_box">
                                		<span><i>${pageK}</i>/<i>${keepModel.totalPage}</i></span> <a href="#" onclick="myKeepUpPage();"><</a><a href="#" onclick="myKeepNextPage();">></a>
                               		 </div>
                               </div>
                        	</div>
                        </div>
                        <div class="gra_foot"></div>
                	</div>
                    <!-- left-part-one--end-->	

                    <!-- left-part-three-->
                    <div class="gradient_sbox">
                        <div class="gra_head">
                            <h1 class="clearfix pr">
                                <img src="../../images/smallpic/title_11.gif" class="fl block" /><span class="fl">特色指南</span>
                                <a href="#" class="more">more</a>
                            </h1>
                        </div>
                        <div class="gra_body">
                        	<div class="mg_line mg_style2">
                                <ul class="t_box">
                                <c:forEach items="${teSeZhiNan}" var="c">
                                	<li>
                                    	<a href="${c.hyperlink }">${c.title}</a>
                                    </li>
                                </c:forEach>
                                </ul>
                        	</div>
                        </div>
                        <div class="gra_foot"></div>
                	</div>
                    <!-- left-part-three--end-->
                    
                </div>
                <!-- left--end-->
                
                <!-- right-->
                <div class="t_rightbox">
                	<div class="gradient_sbox big_box com_gra">
                        <div class="gra_head"></div>
                        <div class="gra_body clearfix trip_h" id="daysList">
                          <c:forEach items="${daysList}" var="tripDay">
                        	<div class="j_detail_box">
					 	
                          
                            	<p class="clearfix title">第${tripDay.day}天</p>
                            	<input name="day" type="hidden" value="${tripDay.day}"/>
	                              <div class="out_box">
	                                  	<ul class="pt_box j_detail">
	                                  				<c:if test="${tripDay.day==1}">
	                                  					<c:forEach items="${trip.myTripDayList1}" var="day">
					                                        <li>
						                                        <div class="obj_trip">
							                                        <input name="image" type="hidden" value="${day.image}"/>
																	<input name="owner" type="hidden" value="${day.tripOwner}"/>
																	<input name="type" type="hidden" value="${day.tripOwnerType}"/>
																	<input name="objName" type="hidden" value="${day.objName}"/>
						                                            <a href="#" class="fl"><img src="${day.image}" class="block" style="width: 152px;height: 89px;" onclick="getHtml('${day.tripOwner}','${day.tripOwnerType}')"/></a>
						                                              <div class="r_box">
							                                           <a href="#" class="check" onclick="seeMap('${day.tripOwner}','${day.tripOwnerType}')">查看地图</a>
							                                                <div class="clear"></div>
							                                                <a href="#" class="name" onclick="getHtml('${day.tripOwner}','${day.tripOwnerType}')">${day.objName}</a>
							                                                <!-- <p class="intro"></p> -->
							                                                <p class="clearfix">
							                                                <a href="#" class="delete"  onclick="removeDiv(this);">删除</a>
							                                               <a href="#" class="check_info" onclick="getHtml('${day.tripOwner}','${day.tripOwnerType}')">【查看详情】</a>
							                                                </p>
						                                              </div>
						                                       </div>
					                                        </li>
				                                        </c:forEach>
			                                        </c:if>
			                                        	<c:if test="${tripDay.day==2}">
	                                  					<c:forEach items="${trip.myTripDayList2}" var="day">
					                                        <li>
						                                        <div class="obj_trip">
							                                        <input name="image" type="hidden" value="${day.image}"/>
																	<input name="owner" type="hidden" value="${day.tripOwner}"/>
																	<input name="type" type="hidden" value="${day.tripOwnerType}"/>
																	<input name="objName" type="hidden" value="${day.objName}"/>
						                                            <a href="#" class="fl"><img src="${day.image}" class="block" style="width: 152px;height: 89px;" onclick="getHtml('${day.tripOwner}','${day.tripOwnerType}')"/></a>
						                                              <div class="r_box">
							                                           <a href="#" class="check" onclick="seeMap('${day.tripOwner}','${day.tripOwnerType}')">查看地图</a>
							                                                <div class="clear"></div>
							                                                <a href="#" class="name" onclick="getHtml('${day.tripOwner}','${day.tripOwnerType}')">${day.objName}</a>
							                                                <!-- <p class="intro"></p> -->
							                                                <p class="clearfix">
							                                                <a href="#" class="delete"  onclick="removeDiv(this);">删除</a>
							                                               <a href="#" class="check_info" onclick="getHtml('${day.tripOwner}','${day.tripOwnerType}')">【查看详情】</a>
							                                                </p>
						                                              </div>
						                                       </div>
					                                        </li>
				                                        </c:forEach>
			                                        </c:if>
			                                        	<c:if test="${tripDay.day==3}">
	                                  					<c:forEach items="${trip.myTripDayList3}" var="day">
					                                         <li>
						                                        <div class="obj_trip">
							                                        <input name="image" type="hidden" value="${day.image}"/>
																	<input name="owner" type="hidden" value="${day.tripOwner}"/>
																	<input name="type" type="hidden" value="${day.tripOwnerType}"/>
																	<input name="objName" type="hidden" value="${day.objName}"/>
						                                            <a href="#" class="fl"><img src="${day.image}" class="block" style="width: 152px;height: 89px;" onclick="getHtml('${day.tripOwner}','${day.tripOwnerType}')"/></a>
						                                              <div class="r_box">
							                                           <a href="#" class="check" onclick="seeMap('${day.tripOwner}','${day.tripOwnerType}')">查看地图</a>
							                                                <div class="clear"></div>
							                                                <a href="#" class="name" onclick="getHtml('${day.tripOwner}','${day.tripOwnerType}')">${day.objName}</a>
							                                                <!-- <p class="intro"></p> -->
							                                                <p class="clearfix">
							                                                <a href="#" class="delete"  onclick="removeDiv(this);">删除</a>
							                                               <a href="#" class="check_info" onclick="getHtml('${day.tripOwner}','${day.tripOwnerType}')">【查看详情】</a>
							                                                </p>
						                                              </div>
						                                       </div>
					                                        </li>
				                                        </c:forEach>
			                                        </c:if>
			                                             	<c:if test="${tripDay.day==4}">
	                                  					<c:forEach items="${trip.myTripDayList4}" var="day">
					                                         <li>
						                                        <div class="obj_trip">
							                                        <input name="image" type="hidden" value="${day.image}"/>
																	<input name="owner" type="hidden" value="${day.tripOwner}"/>
																	<input name="type" type="hidden" value="${day.tripOwnerType}"/>
																	<input name="objName" type="hidden" value="${day.objName}"/>
						                                            <a href="#" class="fl"><img src="${day.image}" class="block" style="width: 152px;height: 89px;" onclick="getHtml('${day.tripOwner}','${day.tripOwnerType}')"/></a>
						                                              <div class="r_box">
							                                           <a href="#" class="check" onclick="seeMap('${day.tripOwner}','${day.tripOwnerType}')">查看地图</a>
							                                                <div class="clear"></div>
							                                                <a href="#" class="name" onclick="getHtml('${day.tripOwner}','${day.tripOwnerType}')">${day.objName}</a>
							                                                <!-- <p class="intro"></p> -->
							                                                <p class="clearfix">
							                                                <a href="#" class="delete"  onclick="removeDiv(this);">删除</a>
							                                               <a href="#" class="check_info" onclick="getHtml('${day.tripOwner}','${day.tripOwnerType}')">【查看详情】</a>
							                                                </p>
						                                              </div>
						                                       </div>
					                                        </li>
				                                        </c:forEach>
			                                        </c:if>
			                                                 	<c:if test="${tripDay.day==5}">
	                                  					<c:forEach items="${trip.myTripDayList5}" var="day">
					                                        <li>
						                                        <div class="obj_trip">
							                                        <input name="image" type="hidden" value="${day.image}"/>
																	<input name="owner" type="hidden" value="${day.tripOwner}"/>
																	<input name="type" type="hidden" value="${day.tripOwnerType}"/>
																	<input name="objName" type="hidden" value="${day.objName}"/>
						                                            <a href="#" class="fl"><img src="${day.image}" class="block" style="width: 152px;height: 89px;" onclick="getHtml('${day.tripOwner}','${day.tripOwnerType}')"/></a>
						                                              <div class="r_box">
							                                           <a href="#" class="check" onclick="seeMap('${day.tripOwner}','${day.tripOwnerType}')">查看地图</a>
							                                                <div class="clear"></div>
							                                                <a href="#" class="name" onclick="getHtml('${day.tripOwner}','${day.tripOwnerType}')">${day.objName}</a>
							                                                <!-- <p class="intro"></p> -->
							                                                <p class="clearfix">
							                                                <a href="#" class="delete"  onclick="removeDiv(this);">删除</a>
							                                               <a href="#" class="check_info" onclick="getHtml('${day.tripOwner}','${day.tripOwnerType}')">【查看详情】</a>
							                                                </p>
						                                              </div>
						                                       </div>
					                                        </li>
				                                        </c:forEach>
			                                        </c:if>
			                                                   	<c:if test="${tripDay.day==6}">
	                                  					<c:forEach items="${trip.myTripDayList6}" var="day">
					                                           <li>
						                                        <div class="obj_trip">
							                                        <input name="image" type="hidden" value="${day.image}"/>
																	<input name="owner" type="hidden" value="${day.tripOwner}"/>
																	<input name="type" type="hidden" value="${day.tripOwnerType}"/>
																	<input name="objName" type="hidden" value="${day.objName}"/>
						                                            <a href="#" class="fl"><img src="${day.image}" class="block" style="width: 152px;height: 89px;" onclick="getHtml('${day.tripOwner}','${day.tripOwnerType}')"/></a>
						                                              <div class="r_box">
							                                           <a href="#" class="check" onclick="seeMap('${day.tripOwner}','${day.tripOwnerType}')">查看地图</a>
							                                                <div class="clear"></div>
							                                                <a href="#" class="name" onclick="getHtml('${day.tripOwner}','${day.tripOwnerType}')">${day.objName}</a>
							                                                <!-- <p class="intro"></p> -->
							                                                <p class="clearfix">
							                                                <a href="#" class="delete"  onclick="removeDiv(this);">删除</a>
							                                               <a href="#" class="check_info" onclick="getHtml('${day.tripOwner}','${day.tripOwnerType}')">【查看详情】</a>
							                                                </p>
						                                              </div>
						                                       </div>
					                                        </li>
				                                        </c:forEach>
			                                        </c:if>
			                                        	<c:if test="${tripDay.day==7}">
	                                  					<c:forEach items="${trip.myTripDayList7}" var="day">
					                                        <li>
						                                        <div class="obj_trip">
							                                        <input name="image" type="hidden" value="${day.image}"/>
																	<input name="owner" type="hidden" value="${day.tripOwner}"/>
																	<input name="type" type="hidden" value="${day.tripOwnerType}"/>
																	<input name="objName" type="hidden" value="${day.objName}"/>
						                                            <a href="#" class="fl"><img src="${day.image}" class="block" style="width: 152px;height: 89px;" onclick="getHtml('${day.tripOwner}','${day.tripOwnerType}')"/></a>
						                                              <div class="r_box">
							                                           <a href="#" class="check" onclick="seeMap('${day.tripOwner}','${day.tripOwnerType}')">查看地图</a>
							                                                <div class="clear"></div>
							                                                <a href="#" class="name" onclick="getHtml('${day.tripOwner}','${day.tripOwnerType}')">${day.objName}</a>
							                                                <!-- <p class="intro"></p> -->
							                                                <p class="clearfix">
							                                                <a href="#" class="delete"  onclick="removeDiv(this);">删除</a>
							                                               <a href="#" class="check_info" onclick="getHtml('${day.tripOwner}','${day.tripOwnerType}')">【查看详情】</a>
							                                                </p>
						                                              </div>
						                                       </div>
					                                        </li>
				                                        </c:forEach>
			                                        </c:if>
	                                	</ul>
	                        	  </div>
	                       
                      </div>
                      </c:forEach>
                        </div>
                        <div class="gra_foot"></div>
                	</div>
                    
                    <div class="gradient_sbox big_box else_list_box">
                        <div class="gra_head">
                            <h1 class="clearfix pr">
                                <img src="../../images/smallpic/title_11.gif" class="fl block" /><span class="fl">我的行程</span>
                            </h1>
                        </div>
                        <div class="gra_body clearfix">
                        	<div class="mg_style3" id="myTripPage">
                                <ul class="com_pt_box trip_list">
                                	<c:forEach items="${tripModel.list}"var="myTripList">
	                                    <li>
	                                    	<c:forEach items="${myTripList.myTripDayList}"var="myTripDayList" varStatus="status">
		                                    	<c:if test="${status.index==0}">
		                                    		<a href="javascript:void(0);" class="fl" onclick="viewMyTrip('${myTripList.id}')"><img src="${myTripDayList.image}" class="block" style="width: 120px;height: 60px;"/></a>
		                                      	</c:if>
	                                      	 </c:forEach>
	                                        
	                                        <div class="r_box">
	                                            <a href="javascript:void(0);" class="name" onclick="viewMyTrip('${myTripList.id}')">"${myTripList.title}"</a>
	                                            <p class="clearfix">
	                                            <span class="fr clr666 mr10"><fmt:formatDate value="${myTripList.gmtCreated}" pattern="MM-dd HH:mm" /></span></p>
	                                        </div>
	                                    </li>
                                    </c:forEach>
                                </ul>
                               <div class="fy_box">
                                	<span><i>${pageT}</i>/<i>${tripModel.totalPage}</i></span> <a href="#" onclick="myTripUpPage();"><</a><a href="#" onclick="myTripNextPage();">></a>
                                </div>
                            </div>
                        </div>
                    	<div class="gra_foot"></div>
                	</div>
                </div>
                <!-- right--end-->
                <div class="clear"></div>
            </div>
        
        </div>
        <!-- content--end-->        
    </div>
    <!-- content--end-->
      <!-- foot-->
	    <%@include file="../common/footer.jsp" %>
	    <!-- foot--end-->
 <script language="javascript">
	$(function(){
		
		$(".my_store").draggable({
			revert: true
		//	helper: "clone"
		});
		$(".out_box").droppable({    
			drop:function(event,ui){
				var appHtml = '<li><div class="obj_trip"><input name="objName" type="hidden" value="'+ui.helper.attr("name")+'"/><input name="image" type="hidden" value="'+ui.helper.attr("image")+'"/><input name="owner" type="hidden" value="'+ui.helper.attr("owner")+'"/><input name="type" type="hidden" value="'+ui.helper.attr("type")+'"/><a href="#" class="fl"><img src='+ui.helper.attr("image")+' class="block" style="width: 152px;height: 89px;" ></a>'+
							  '<div class="r_box"><a href="#" class="check"  onclick="seeMap('+ui.helper.attr("owner")+',\''+ui.helper.attr("type")+'\');">查看地图</a><div class="clear"></div>'+
							  '<a href="#" class="name" onclick="getHtml('+ui.helper.attr("owner")+',\''+ui.helper.attr("type")+'\')">'+ui.helper.attr("name")+'</a>'+
							  '<p class="clearfix"><a href="#" class="delete"  onclick="removeDiv(this);">删除</a><a href="#" class="check_info" onclick="getHtml('+ui.helper.attr("owner")+',\''+ui.helper.attr("type")+'\')">【查看详情】</a></p></div></div></li>';
				var id = ui.helper.attr("id")
				var ptbox = $(this).find(".pt_box");
				if(ptbox.size() < 1){
					$(this).append("<ul class='pt_box j_detail'></ul>");
				}
				$(this).find(".pt_box").append(appHtml);
				$(this).find(".tip").html("");
			}
		});
	});
	//删除
	function removeDiv(obj){
		$(obj).parent().parent().parent().parent().remove();
	}
	//查看详情
	function viewDetiel(owner,type){
		$.post("viewDetielByTrip.htm",{
			owner:owner,
			type:type
		});	
	}
	//生成天数list
	function beDaysList(){
		var days=$("#daysTrip").find("option:selected").text();
		$("#daysList").html("");
		for(var i=1;i<=days;i++){
			$("#daysList").append(
					"<div class='j_detail_box'> <input name='day' type='hidden' value='" + i + "'/><p class='clearfix title'>第" + i + "天</p><div class='out_box'><p class='tip'>从列表中将该项目拖动至这里增加该日行程</p></div></div>");
		}
		$(".out_box").droppable({
			drop:function(event,ui){
				var appHtml = '<li><div class="obj_trip"><input name="objName" type="hidden" value="'+ui.helper.attr("name")+'"/><input name="image" type="hidden" value="'+ui.helper.attr("image")+'"/><input name="owner" type="hidden" value="'+ui.helper.attr("owner")+'"/><input name="type" type="hidden" value="'+ui.helper.attr("type")+'"/><a href="#" class="fl"><img src='+ui.helper.attr("image")+' class="block" style="width: 152px;height: 89px;" ></a>'+
							  '<div class="r_box"><a href="#" class="check" onclick="seeMap('+ui.helper.attr("owner")+',\''+ui.helper.attr("type")+'\');">查看地图</a><div class="clear"></div>'+
							  '<a href="#" class="name" onclick="getHtml('+ui.helper.attr("owner")+',\''+ui.helper.attr("type")+'\')">'+ui.helper.attr("name")+'</a>'+
							  '<p class="clearfix"><a href="#" class="delete"  onclick="removeDiv(this);">删除</a><a href="#" class="check_info" onclick="getHtml('+ui.helper.attr("owner")+',\''+ui.helper.attr("type")+'\')">【查看详情】</a></p></div></div></li>';
				var id = ui.helper.attr("id")
				var ptbox = $(this).find(".pt_box");
				if(ptbox.size() < 1){
					$(this).append("<ul class='pt_box j_detail'></ul>");
				}
				$(this).find(".pt_box").append(appHtml);
				$(this).find(".tip").html("");
			}
		});
	}

	function updateTrip(){
		
		var days=$("#daysTrip").find("option:selected").text();
		//alert(days);
		
		//alert(day);
		var tripDayList = new Array();
		$(".obj_trip").each(function() {
			tripDayList.push({
				"day":$(this).parent().parent().parent().parent().find("input[name=day]").val(),
				"image":$(this).find("input[name=image]").val(),
				"objName":$(this).find("input[name=objName]").val(),
				"tripOwner":$(this).find("input[name=owner]").val(),
				"tripOwnerType":$(this).find("input[name=type]").val()
			});
		});
		$.post("updateMyTrip.htm",{ 
			'tripDayList' : $.toJSON(tripDayList),
			'days':days,
			'id':$("#tripId").val(),
			'title':$("#title").val(),
			'startDate':$("#startTime").val()
		},function(data){
			if(data=='success'){
				alert('更新成功');
			}
		});
	}
	function viewMyTrip(id){
		window.location.href="viewTripByTid.htm?id="+id;
	}
	/* function viewMap(lng,lat){
		window.open ("viewMap.htm?lng="+lng+"&lat="+lat);
	} */
	function seeMap(owner,type){
		window.open ("seeMap.htm?owner="+owner+"&type="+type);
	}
	function getHtml(owner,type){
		if(type=='att'){
			window.open ("scenic.htm?id="+owner);
		}else if(type=='hotel'){
			window.open ("hotel.htm?id="+owner);
		}
		else if(type=='product'){
			window.open ("product.htm?id="+owner);
		}
	}
	function myKeepNextPage(){
		
		var pageK=${pageK}+1;
		$('#dom0').load("myKeepPage.htm?pageK="+pageK);
		//alert(pageK);
	}
	function myKeepUpPage(){
		var pageK=${pageK}-1;
		$('#dom0').load("myKeepPage.htm?pageK="+pageK);
		//alert(pageK);
	}
	function myTripNextPage(){
		var pageT=${pageT}+1;
		$('#myTripPage').load("myTripPage.htm?pageT="+pageT);
		
		//alert(pageT);
	}
	function myTripUpPage(){
		var pageT=${pageT}-1;
		$('#myTripPage').load("myTripPage.htm?pageT="+pageT);
		//alert(pageT);
	}
</script>
</body>
</html>
